<script setup lang="ts">
    import CanvasDistrict from "@/components/SmartCanvasWidget/CanvasDistrict";
    import CanvasPainting from "@/components/SmartCanvasWidget/CanvasPainting";
    import {Application} from "pixi.js";

    // 画布组件
    const canvasWidgetRef = ref<any>(null);

    // 画笔对象
    let paintingApplication: CanvasPainting;

    // 快速选区对象
    let districtApplication: CanvasDistrict;

    // 数据集
    const dataBean = reactive<{
        // 当前画笔大小
        brush: number;
        // 当前橡皮擦大小
        eraser: number;
        // 画布缩放比例
        scale: number | string;
        // 画布背景色
        backgroundColor: string | number;
        // 画板宽度
        width: number;
        // 画板高度
        height: number;
        // 画布分辨率
        resolution: number | string;
        // 画板是否存在图片资源
        hasAssets: boolean;
    }>({
        brush: 32,
        eraser: 32,
        scale: "auto",
        // backgroundColor: "#1099bb",
        backgroundColor: 0xffffff,
        width: 1024,
        height: 1024,
        resolution: "auto",
        hasAssets: false
    });

    // 改变缩放大小事件
    const changeScaleHandler = (value: string | number): void =>
    {
        if (canvasWidgetRef && canvasWidgetRef.value)
        {
            canvasWidgetRef.value.setScale(value);
        }
    };

    // 改变尺寸事件
    const changeSizeHandler = (argumentsList: Record<string, any>): void =>
    {
        const {width, height} = argumentsList || {};

        if (canvasWidgetRef && canvasWidgetRef.value)
        {
            canvasWidgetRef.value.setSize(width, height);
        }
    };

    // 上传图片之前事件
    const beforeUpload = (): void =>
    {
        if (canvasWidgetRef && canvasWidgetRef.value)
        {
            // 显示加载
            canvasWidgetRef.value.showLoading();
        }
    };

    // 上传图片成功事件
    const uploadSuccessHandler = (argumentsList: Record<string, any>): void =>
    {
        const {url} = argumentsList || {};

        if (canvasWidgetRef && canvasWidgetRef.value)
        {
            canvasWidgetRef.value.addImage("image", url).then(() =>
            {
                // 成功后改变图片资源状态
                dataBean.hasAssets = true;

                // 隐藏加载
                canvasWidgetRef.value.hideLoading();
            });
        }
    };

    // 上传图片失败事件
    const uploadFailHandler = (): void =>
    {
        if (canvasWidgetRef && canvasWidgetRef.value)
        {
            // 隐藏加载
            canvasWidgetRef.value.hideLoading();
        }
    };

    // 画布加载完成事件
    const completeHandler = (app: Application): void =>
    {
        // 实例化重绘
        paintingApplication = new CanvasPainting({app});

        // 实例化快速选区
        districtApplication = new CanvasDistrict({app});

        // 模拟数据
        canvasWidgetRef.value.addImage("image", "./src/assets/images/m1/source.jpg").then(() =>
        {
            // 成功后改变图片资源状态
            dataBean.hasAssets = true;
        });
    };

    // 工具点击事件
    const toolsClickHandler = (type: string) =>
    {
        // 画笔和橡皮擦
        if (["brush", "eraser"].includes(type))
        {
            paintingApplication.painting(type, {
                width: type === "brush" ? dataBean.brush : dataBean.eraser
            });

            // 启用画笔
            paintingApplication.enable();

            // 禁用快速选区
            districtApplication.disable();
        }
        // 快速选区
        else if (type === "electoral")
        {
            // districtApplication.district();

            // 模拟快速选区
            districtApplication.districtDemo(["./src/assets/images/m1/m1.png", "./src/assets/images/m1/m2.png", "./src/assets/images/m1/m3.png"]);

            // 启用快速选区
            districtApplication.enable();

            // 禁用画笔
            paintingApplication.disable();
        }
    };

    // 改变刷子大小事件
    const changeBrushSizeHandler = (value: number): void =>
    {
        dataBean.brush = value;

        paintingApplication.painting("brush", {
            width: dataBean.brush
        });
    };

    // 改变橡皮擦大小事件
    const changeEraserSizeHandler = (value: number): void =>
    {
        dataBean.eraser = value;

        paintingApplication.painting("eraser", {
            width: dataBean.eraser
        });
    };

</script>

<template>
    <!-- 智能画布 -->
    <div class="smart-canvas">
        <!-- 工具 -->
        <div class="tools">
            <smart-canvas-tools
                :brush="dataBean.brush"
                :eraser="dataBean.eraser"
                :scale="dataBean.scale"
                :background-color="dataBean.backgroundColor"
                :resolution="dataBean.resolution"
                :width="dataBean.width"
                :height="dataBean.height"
                :has-assets="dataBean.hasAssets"
                @change-scale="changeScaleHandler"
                @change-size="changeSizeHandler"
                @upload-success="uploadSuccessHandler"
                @click="toolsClickHandler"
                @before-upload="beforeUpload"
                @upload-fail="uploadFailHandler"
                @change-brush-size="changeBrushSizeHandler"
                @change-eraser-size="changeEraserSizeHandler"
            ></smart-canvas-tools>
        </div>
        <!-- //工具 -->

        <!-- 创作 -->
        <div class="creation">
            <!-- 输入框 -->
            <div class="input">
                <el-input placeholder="请输入内容进行创作"></el-input>
            </div>
            <!-- //输入框 -->

            <!-- 按钮 -->
            <div class="button">
                <el-button type="primary">创作</el-button>
            </div>
            <!-- //按钮 -->
        </div>
        <!-- //创作 -->

        <!-- 画布 -->
        <div class="panel">
            <smart-canvas-widget
                ref="canvasWidgetRef"
                :scale="dataBean.scale"
                :background-color="dataBean.backgroundColor"
                :resolution="dataBean.resolution"
                :width="dataBean.width"
                :height="dataBean.height"
                @onload="completeHandler"
            ></smart-canvas-widget>
        </div>
        <!-- //画布 -->
    </div>
    <!-- //智能画布 -->
</template>

<style scoped lang="scss">
    // 智能画布
    .smart-canvas
    {
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding: 10px;
        position: relative;

        // 画布
        .panel
        {
            width: 100%;
            height: calc(100% - 46px);
            margin-top: 10px;
        }

        // 创作
        .creation
        {
            position: absolute;
            display: flex;
            align-items: center;
            bottom: 20px;

            // 输入框
            .input
            {
                width: 300px;
            }

            // 按钮
            .button
            {
                margin-left: 10px;
            }
        }
    }
</style>